/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="index_class">
		<view class="order-deta">
			<!-- 用户选择的自提信息 -->
			<view class="self_info">
				<view class="self_title">自提信息</view>
				<view class="self_userinfo">
					<view class="self_username">
						<i class="iconfont icon_e655"></i>
						<text>{{orderInfo.contacts}}</text>
					</view>
					<view class="self_username">
						<i class="iconfont icon_e682"></i>
						<text>{{orderInfo.telephone}}</text>
					</view>
				</view>
				
				<view class="self_order_list" @click="self_order()">
					<view class="self_juan">
						<text class="order_list_left_title">{{$t('查看自提点')}}</text>
					</view>
					<i class="iconfont icon_e60c order_color"></i>
				</view>
			</view>

			<view class="fresh_list">
				<view class="order_bottom">
					<view class="bottom_top">
						<view>
							<i class="iconfont cart_e61d"></i>
							{{orderInfo.shop_name}}
						</view>
						<i class="iconfont order_all_right"></i>
					</view>
					<view class="bottom_img" v-for="(item2,index) in orderInfo.goodsinfo" :key="index">
						<image :src="item2.thumb_url"
							@click="getnav('/pagesC/goods/goodsDetails?id='+item2.goods_id)" />
						<view style="padding:0 40upx 0 20upx;flex:1">
							<view class="introduce" @click="getnav('/pagesC/goods/goodsDetails?id='+item2.goods_id)">
								{{item2.goods_name}}</view>
							<view class="arrt-str">{{item2.goods_attr_str}}</view>
						</view>
						<view style="font-size:24upx;text-align:right">
							¥{{item2.real_price}}
							<view style="text-align:right;color:#999">x{{item2.goods_num}}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="order_list order-list-info u-p-t-10">
				<view>
					<text>{{$t('支付方式')}}</text>
					<text class="color">{{orderInfo.paytype}}</text>
				</view>
				<view>
					<text>{{$t('商品价格')}}</text>
					<text class="color">¥ {{orderInfo.goods_price}}</text>
				</view>
				<view>
					<text>{{$t('运费')}}</text>
					<text class="color">¥ {{orderInfo.freight}}</text>
				</view>

				<view>
					<text>{{$t('优惠券')}}</text>
					<text class="color">-¥ {{orderInfo.youhui_price}}</text>
				</view>
				<view>
					<text>{{$t('优惠信息')}}</text>
					<text class="color">{{orderInfo.coupon_str}}</text>
				</view>
				<view class="order-name">
					<text>{{$t('应付金额')}}</text>
					<text class="color">¥ {{orderInfo.total_price}}</text>
					
				</view>
			</view>

			<view class="order_list order-list-info u-m-t-20 u-m-b-60 u-p-t-10 u-p-b-10">
				<view>
					<text>{{$t('订单号')}}:</text>
					<text class="color">{{orderInfo.ordernumber}}</text>
				</view>
				<view>
					<text>{{$t('交易编号')}}:</text>
					<text class="color">{{orderInfo.order_number}}</text>
				</view>
				<view>
					<text>{{$t('创建时间')}}</text>
					<text class="color">{{orderInfo.addtime}}</text>
				</view>
				<view v-if="orderInfo.filter == 2 || orderInfo.filter == 3 || orderInfo.filter == 4">
					<text>{{$t('创建时间')}}</text>
					<text class="color">{{orderInfo.pay_time}}</text>
				</view>
				<view v-if="orderInfo.filter == 3 || orderInfo.filter == 4">
					<text>{{$t('发货时间')}}</text>
					<text class="color">{{orderInfo.fh_time}}</text>
				</view>
				<view v-if="orderInfo.filter == 4">
					<text>{{$t('收货时间')}}</text>
					<text class="color">{{orderInfo.coll_time}}</text>
				</view>
			</view>
			<view class="zhanwei"></view>
			<view class="checkorder-com">
				<button @click="checkOrderCode">{{$t('确认核销')}}</button>
			</view>
			
			<u-popup ref="popupCopun" mode="bottom" border-radius="12">
				<view class="popup-coupon">
					<view class="popup-title">{{$t('店铺自提点')}}</view>
					<view class="coupon-list">
						<view class="guarantee" v-for="(value,index) in shopStore" :key="index">
							<image />
							<view class="guar-cont">
								<view>{{value.province}}{{value.city}}{{value.area}}</view>
								<view style="color:#999;margin-top:10rpx;">{{value.address_detail}}</view>
								<view style="color:#999;margin-top:10rpx;">营业时间:{{value.work_start_time}}-{{value.work_end_time}}</view>
								<view style="color:#999;margin-top:10rpx;">联系人:{{value.contact}} 电话:{{value.phone}}</view>
							</view>
						</view>
					</view>
				
					<view class="popup-com">
						<button @click="self_order_close">{{$t('关闭')}}</button>
					</view>
				</view>
			</u-popup>
			
		</view>
	</view>
</template>

<script>
	let order_num = "",
		payOrderNumer; // 订单编号
	let page = 1; // 页码
	let providerList = []; // 支付通道
	let orderInfoData = {};
	let backindex = "";

	export default {
		components: {},
		data() {
			return {
				wechatMiniProgram: 0,
				h5: 0,
				orderInfo: {}, // 订单详情
				valShow: false,
				valueStatus: 0, // 更新页面状态 防止页面卡死
				shopStore:[],
			}
		},
		onShow() {
			this.getMyorderinfo();
		},
		onLoad(option) {
			order_num = option.order_num;
			backindex = option.backindex;
			//#ifdef MP-WEIXIN
			this.wechatMiniProgram = 1;
			//#endif
			//#ifdef H5
			this.h5 = 1;
			//#endif

			uni.setNavigationBarTitle({
				title: this.$t('核销订单详情')
			});
		},
		
		methods: {

			getMyorderinfo() {
				this.$loading();
				this.$http.getMyorderinfo({
					order_num
				}).then(res => {
					if (res.status == 200) {
						this.orderInfo = res.data;
					}
				});
			},
			
			checkOrderCode() {
				this.$http.checkOrderCode({
					check_order_sn:this.orderInfo.check_order_sn
				}).then(res => {
					if (res.status == 200) {
						this.$toast(this.$t('核销成功'));
						setTimeout(()=>{
							this.getnav('/pagesC/order/checkorder');
						},2000)
					}
				});
			},

			self_order() {
				this.$http.getShopStore({
					shop_id:this.orderInfo.shop_id
				}).then(res => {
					if (res.status == 200) {
						this.shopStore = res.data;
					}
				});
				this.$refs.popupCopun.open();
			},
			
			self_order_close(){
				this.$refs.popupCopun.close(); // 关闭
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import '~uview-ui/index.scss';
	.shou_sure {
		span {
			display: block;
			// width: 100upx;
			height: 40upx;
			padding: 0 20upx;
			line-height: 40upx;
			border-radius: 20upx;
			border: 1upx solid #999;
			color: #999;
			text-align: center;
			font-size: 24upx;
		}
	}

	.order-list-info {
		>view {
			margin: 10upx 0;

			text:nth-child(2) {
				display: block;
				flex: 1;
				text-align: left;
			}

			text:nth-child(1) {
				display: block;
				width: 30%;
				text-align: left;
			}
		}
	}
	.self_info{
		background-color:#FFFFFF;
		.self_title{
			font-size:24upx;
			color:#999999;
			padding:4upx 30upx;
			height:60upx;
			line-height:60upx;
		}
		.self_userinfo{
			padding:4upx 30upx;
			.self_username{
				height:80upx;
				line-height:80upx;
				text{
					padding-left:20upx;
				}
			}
		}
	}
	
	.self_order_list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:20upx 30upx;
		.self_juan {
			display: flex;
			text {
				font-size: 28rpx;
				color: #303133;
				&:nth-child(1) {
					font-weight: 500;
				}
				;
				&:nth-child(2),
				&:nth-child(3) {
					color: #606266;
				}
			}
			.color {
				color: #f44336;
			}
		}
		.order_color {
			font-size: 26rpx;
			color: #333;
		}
	}
	.zhanwei{
		height:80upx;
		line-height: 80upx;
	}
	.checkorder-com{
		padding: 10upx 30upx;
		position: fixed;
		bottom: 0;
		width: 100%;
		button{
			width: 100%;
			border-radius: 40upx;
			height: 80upx;
			line-height: 80upx;
			background-color: #FA3F3F;
			text-align: center;
			color: #fff;
		}
	}
</style>
